<template>
  <div id="app">
    <header class="header">
      <h1 class="text-[#ff0000]">Vue3 Monorepo - Web</h1>
      <nav>
        <router-link to="/">首页</router-link> |
        <router-link to="/about">关于</router-link>
      </nav>
    </header>
    
    <main class="main">
      <router-view />
    </main>
    
    <footer class="footer">
      <p>&copy; 2024 Vue3 Monorepo Demo</p>
    </footer>
  </div>
</template>

<script setup>
// 使用公共组件
import { BaseButton } from '@mo/components'
</script>

<style scoped>
.header {
  background: #f5f5f5;
  padding: 1rem;
  text-align: center;
}

.header nav {
  margin-top: 1rem;
}

.header nav a {
  margin: 0 0.5rem;
  color: #333;
  text-decoration: none;
}

.header nav a.router-link-active {
  color: #409eff;
}

.main {
  min-height: 60vh;
  padding: 2rem;
}

.footer {
  background: #f5f5f5;
  padding: 1rem;
  text-align: center;
  margin-top: auto;
}
</style> 